<template>
	<div id="orgFullScreen">
		<el-container>
			<el-header class="header">
				<div class="logo">
					<img src="../assets/img/login.png" alt="">
					<span>云慧约</span>
				</div>
				<div class="menu">
					<el-button class="add" type="primary" size="small" icon="el-icon-back" @click="$router.back(-1)">返回
					</el-button>
				</div>
			</el-header>
			
			<el-main class="main" >
				<div class="shebei">
					<h1 class="headline">网点设备监控</h1>
					<div class="websiteList">
						<div class="list" v-for="(item,i) in lists" :key="i">
							<div class="info">
								<div class="i-header">{{item.latticeName}}</div>
								<div v-if="!item.equipment.length>0" style="text-align: center;margin-top: 20px;">窗口暂无设备</div>
								<div v-else class="card" v-for="(x,y) in item.equipment" :key="y">
									<div class="cardList" v-if="x.dp == true">
										<img src="../assets/img/tv.png" style="width: 22px;height: 16px;">
										<span>电视机</span>
										<img src="../assets/img/normal.png" class="dot">
									</div>
									<div class="cardList" v-if="x.dp == false">
										<img src="../assets/img/tv.png" style="width: 22px;height: 16px;">
										<span>电视机</span>
										<img src="../assets/img/warn.png" class="dot">
									</div>


									<div class="cardList" v-if="x.qhj == true">
										<img src="../assets/img/qhj.png" style="width: 18px;height: 20px;">
										<span>取号机</span>
										<img src="../assets/img/normal.png"  class="dot">
									</div>
									<div class="cardList" v-if="x.qhj == false">
										<img src="../assets/img/qhj.png" style="width: 18px;height: 20px;">
										<span>取号机</span>
										<img src="../assets/img/warn.png"  class="dot">
									</div>


									<div class="cardList" v-if="x.hjq == true">
										<img src="../assets/img/hjq.png" style="width: 18px;height: 20px;">
										<span>呼叫器</span>
										<img src="../assets/img/normal.png" class="dot">
									</div>
									<div class="cardList" v-if="x.hjq == false">
										<img src="../assets/img/hjq.png" style="width: 18px;height: 20px;">
										<span>呼叫器</span>
										<img src="../assets/img/warn.png" class="dot">
									</div>


									<div class="cardList" v-if="x.pjq == true">
										<img src="../assets/img/pjq.png" style="width: 18px;height: 20px;">
										<span>评价器</span>
										<img  src="../assets/img/normal.png" class="dot">
									</div>
									<div class="cardList" v-if="x.pjq == false">
										<img src="../assets/img/pjq.png" style="width: 18px;height: 20px;">
										<span>评价器</span>
										<img   src="../assets/img/warn.png" alt="" class="dot">
									</div>


									<div class="cardList" v-if="x.led == true">
										<img src="../assets/img/led.png" style="width: 18px;height: 20px;">
										<span>L E D</span>
										<img src="../assets/img/normal.png" class="dot">
									</div>
									<div class="cardList" v-if="x.led == false">
										<img src="../assets/img/led.png" style="width: 18px;height: 20px;">
										<span>L E D</span>
										<img src="../assets/img/warn.png" class="dot">
									</div>
								</div>
							</div>
							<el-button class="orgBtn" type="primary" @click="goLink('./fullScreen',item.latticeid)">全屏监控</el-button>
						</div>
					</div>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import {orgMonitor} from '../api/getData.js'
export default {
	data:function(){
		return {
			lists:[]
		}
	},
	created: function () {}, // 创建时
	beforeMount: function () {}, // 挂载之前
	mounted() {
		this.getMonitor()
	}, // 挂载之后
	beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
	updated: function () {}, // 数据更新后,渲染后调用(禁止)
	beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
	destroyed: function () {}, // 实例销毁后调用
	methods:{
		getMonitor(){
			orgMonitor({}).then((res) =>{
				console.log(res.data,"网点设备监控")
				if(res.data.code == 0){
					this.lists = res.data.data
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		goLink(url,id){
			this.$router.push({
				path:url,
				query:{
					id:id
				}
			})
		}
	}
}
</script>

<style lang='scss'>
#orgFullScreen{
	height: 100%;
	box-sizing: border-box;
	min-width: 1200px;
	background: #f1f2f6;
	overflow-x: hidden;
	.header{
		background-color: #fff;
		padding: 0 40px;
		color: #333;
		text-align: center;
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: #ccc 1px 1px 10px;
		z-index: 9;
		position: fixed;
		width: 100%;
		top:0;
		left:0;
		.logo{
			display: flex;
			align-items: center;
			font-size: 20px;
			color: #4381ED;
			img{
				width: 42px;
				height: 28px;
				margin-right: 10px;
			}
		}
		.menu{
			display: flex;
			align-items: center;
		}
		
	}
	.main{
		margin: 100px auto 0;
		width: 96%;
		height: 96%;
		background: #fff;
		overflow-y: auto;
		.headline{
			text-align: center;
			font-size: 26px;
			color: #000000;
			margin-top: 10px;
		}
		.websiteList{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			.list{
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 60px 10%;
				.info{
					width: 180px;
					height: 230px;
					border-radius: 4px;
					border: 1px solid #328ff9;
					padding-bottom: 20px;
					margin-bottom: 16px;
					.i-header{
						width: 178px;
						height: 38px;
						font-size: 12px;
						line-height: 38px;
						text-align: center;
						background: #328ff9;
						border: 1px solid #328ff9;
						color: #fff;
					}
					.card{
						padding-top: 10px;
						.cardList{
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 12px;
							font-size: 13px;
							span{
								margin: 0 10px;
								width: 50px;
								display: inline-block;
							}
						}
					}
					.dot{
						width: 12px;
						height: 12px;
					}
				}
				.orgBtn{
					width: 98px;
					height: 32px;
					line-height: 32px;
					padding: 0;
				}
		
			}
		}
	}
	.blink{
		/* color: #dd4814; */
		animation: blink 1s linear infinite;  
		/* 其它浏览器兼容性前缀 */
		-webkit-animation: blink 1s linear infinite;
		-moz-animation: blink 1s linear infinite;
		-ms-animation: blink 1s linear infinite;
		-o-animation: blink 1s linear infinite;
	}
	/* 定义keyframe动画，命名为blink */
	@keyframes blink{
	  0%{opacity: 1;}
	  100%{opacity: 0;} 
	}
	@-webkit-keyframes blink {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-moz-keyframes blink {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-ms-keyframes blink {
		0% {opacity: 1; } 
		100% { opacity: 0;}
	}
	@-o-keyframes blink {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}
	.people {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.people1 {
			box-sizing: border-box;
			margin: 30px 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 10px 30px;
			font-size: 18px;
		}
	}
}
</style>
